<template>
    <view class="index-container">
        <view class="top-bar">
            <u-image width="70rpx" height="58rpx" src="/static/rose.png" shape="square" border-radius="4"></u-image>
            <u-search placeholder="请输入关键字" v-model="searchStr" @click="toSearch" shape="square" margin="0 15rpx"
                :show-action="false" :disabled="true"></u-search>
        </view>
        <view class="swiper-bar">
            <swiperBar :swiperList="swiperList"></swiperBar>
        </view>
        <plantList :listData="plantList"></plantList>
        <view class="more" v-if="bottomLoading && !noMore">
            <u-loading mode="flower"></u-loading>加载中...
        </view>
        <view class="noMore" v-if="noMore">没有更多了</view>
        <bottomTabBar></bottomTabBar>
        <!-- <u-loading mode="flower" :show="isLoading"></u-loading> -->
    </view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    import swiperBar from '@/components/swiper-bar.vue';
    import plantList from '@/components/plant-list.vue';
    import bottomTabBar from '@/components/bottom-tabbar.vue';
    import Req from '@/common/req.js';
    import api from '@/common/api.js';
    import {
        loading,
        bottomLoad,
        wsName
    } from '@/common/global.js'
    export default {
        name: 'index',
        components: {
            swiperBar,
            plantList,
            bottomTabBar
        },
        data() {
            return {
                searchStr: '',
                searchBtnStyle: {
                    background: '#55aaff',
                    color: '#fff',
                    padding: '10rpx',
                    borderRadius: '6rpx'
                },
                swiperList: [], // 横向滚动的数据
                plantList: [], // 植物列表信息
                plantListTotal: 0,
                plantListPage: 1,
                isLoading: false,
                noMore: false,
                socketOpen: false,
                socketMsgQueue: ['11', '22'],
                keyIndex: 999
            }
        },
        computed: {
            ...mapState({
                bottomFunc: state => state.bottomFunc,
                personInfo: state => state.personInfo,
                bottomLoading: state => state.bottomLoading
            })
        },
        methods: {
            bottomLoad() {
                console.log('index触底加载')
            },
            /**
             * 跳转
             * */
            toSearch(evt) {
                uni.navigateTo({
                    url: '/pages/search/search'
                })
            },
            /**
             * 获取横向滚动栏的数据
             * */
            getSwiperData() {
                let url = '/recommend/plant'
                if (this.personInfo.phone !== '') {
                    url += '/' + this.personInfo.phone
                }
                let params = {
                    phone: this.personInfo.phone,
                    token: this.personInfo.token,
                    pageNum: 1,
                    pageSize: 10
                }
                Req.get(url, params, res => {
                    if (res.data.status === 0) {
                        this.swiperList = res.data.data;
                    }
                })
            },
            /**
             * 获取竖向滚动栏的数据
             * */
            getPlantListData(pageNum, cb) {
                let url = '/botanys/condition/all/botanys'
                let params = {
                    pageNum: pageNum,
                    pageSize: 10
                }
                Req.get(url, params, res => {
                    this.$updateParams(['bottomLoading', false])
                    if (res.data.status === 0 && res.data.data.length > 0) {
                        this.plantList = [...this.plantList, ...res.data.data];
                        this.plantListTotal = res.data.total;
                        this.plantListPage++
                        cb && cb();
                    }
                })
            }
        },
        onReachBottom() {
            if (this.plantList.length >= this.plantListTotal) {
                this.noMore = true;
                return;
            }
            this.$updateParams(['bottomLoading', true])
            this.getPlantListData(this.plantListPage);
        },
        created() {
            this.getSwiperData();
            this.getPlantListData(this.plantListPage);
        },
        onPullDownRefresh() {
            this.swiperList = [];
            this.getSwiperData();
            this.plantList = []
            this.plantListPage = 1;
            this.getPlantListData(this.plantListPage, () => {
                uni.stopPullDownRefresh()
            });
        },
        mounted() {
            uni.connectSocket({
                url: 'ws://119.23.245.89:3003/'
            })
            uni.onSocketError(function(res) {
                console.log('WebSocket连接打开失败，请检查！', res);
            });
            uni.onSocketOpen((res) => {
                console.log('WebSocket连接已打开！');
                setTimeout(() => {
                    let params = {
                        phone: this.personInfo.phone + 22,
                        token: this.personInfo.token
                    }
                    uni.sendSocketMessage({
                      data: JSON.stringify(params),
                      success: () => {
                          console.log('发送数据')
                      },
                      fail: () => {
                          console.log('失败')
                      }
                    });
                }, 0)
            })
            uni.onSocketMessage(data => {
                console.log('接收到的数据',JSON.parse(data.data))
                let json = JSON.parse(data.data).data;
                if(json && json.length > 0) {
                    this.swiperList = json;
                }
                
            })
        },
        onLoad(options) {
            console.log('参数', options)
        }
    }
</script>

<style lang="less" scoped>
    .index-container {
        padding: 15rpx;

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            height: 90rpx;
        }
    }
</style>
